<template>
    <!-- 中间动画 -->
    <div class="center-canvas-model">
        <!-- 中间动画 -->
        <div class="round-wrap">
            <!-- 波纹 -->
            <div class="ball-one"></div>
            <div class="ball-two"></div>
            <div class="margin-round"></div>
            <div class="padding-round">
                <i class="iconfont" :class="currentTypeIcon"></i>
            </div>
        </div>
        <!-- 识别类别集合 -->
        <div class="recognize-categories-list">
            <div v-for="(item, i) in typeListData" class="recognize-categories-item" :class="[{'active': currentTypeId == item.alarmTypeId}, 'type-item-'+(i+1)]" @click="handelClickType(i) " :key="item.alarmTypeId">
                <!-- 信息框 -->
                <div class="message-box">
                    <p class="item-type-icon"><i class="iconfont" :class="mapTypeIcon(item.alarmTypeName)"></i></p>
                    <p class="item-type-name">{{ item.alarmTypeName }}</p>
                    <div class="item-type-detail" v-show="currentTypeId == item.alarmTypeId">
                        <div class="detail-item">
                            <p class="detail-item-value color-1">{{ item.alertNum }}</p>
                            <p class="detail-item-title">{{ item.alertNumName }}</p>
                        </div>
                        <div class="detail-item">
                            <p class="detail-item-value color-3">{{ item.normalNum }}</p>
                            <p class="detail-item-title">{{ item.normalNumName }}</p>
                        </div>
                    </div>
                </div>
                <!-- 投影灯 -->
                <div class="projection-lamp"></div>
                <!-- 投影底座 -->
                <div class="projection-base">
                    <div class="base-round"></div>
                    <!-- 波纹 -->
                    <div class="ball-one"></div>
                </div>
                <!-- 连接线 -->
                <template v-if="i == 0">
                    <svg id="svg_line_1" class="svg-line" xmlns="http://www.w3.org/2000/svg" v-show="currentTypeId==item.alarmTypeId">
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path1" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path1" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path1" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path1" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path1" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path1" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;3s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path1" />
                            </animateMotion>
                        </text>
                        <path id="path1" d="m0,138 c100,-50 350,-87 560,38" stroke-width="2" stroke="rgba(71,210,232,.2)" fill="none"/>
                    </svg>
                </template>
                <template v-else-if="i == 1">
                    <svg id="svg_line_2" class="svg-line" xmlns="http://www.w3.org/2000/svg" v-show="currentTypeId==item.alarmTypeId">
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path2" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path2" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path2" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path2" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path2" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path2" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;3s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path2" />
                            </animateMotion>
                        </text>
                        <path id="path2" d="m0,60 c60,-50 370,-4 200,60" stroke-width="2" stroke="rgba(71,210,232,.2)" fill="none"/>
                    </svg>
                </template>
                <template v-else-if="i == 2">
                    <svg id="svg_line_3" class="svg-line" xmlns="http://www.w3.org/2000/svg" v-show="currentTypeId==item.alarmTypeId">
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s" dur="2s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path3" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;.5s" dur="2s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path3" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1s" dur="2s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path3" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1.5s" dur="2s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path3" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2s" dur="2s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path3" />
                            </animateMotion> 
                        </text>
                        <path id="path3" d="m0,80 c0,10 17,-40 145,-40" stroke-width="2" stroke="rgba(71,210,232,.2)" fill="none"/>
                    </svg>
                </template>
                <template v-else-if="i == 3">
                    <svg id="svg_line_4" class="svg-line" xmlns="http://www.w3.org/2000/svg" v-show="currentTypeId==item.alarmTypeId">
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path4" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path4" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path4" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path4" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path4" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path4" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;3s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path4" />
                            </animateMotion> 
                        </text>
                        <path id="path4" d="m9.047627,143.809524c0,0 215.238095,-108.571429 488.571429,1.904762" stroke-width="2" stroke="rgba(71,210,232,.2)" fill="none"/>
                    </svg>
                </template>
                <template v-else>
                    <svg id="svg_line_5" class="svg-line" xmlns="http://www.w3.org/2000/svg" v-show="currentTypeId==item.alarmTypeId">
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path5" />
                            </animateMotion>
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path5" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path5" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;1.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path5" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path5" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;2.5s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path5" />
                            </animateMotion> 
                        </text>
                        <text font-family="microsoft yahei" font-size="30" font-weight="800" x="0" y="10" fill="#47D2E8">>
                            <animateMotion begin="0s;3s" dur="3s" rotate="auto" repeatCount="indefinite">
                                <mpath xlink:href="#path5" />
                            </animateMotion> 
                        </text>
                        <path id="path5" d="m0,200 c0,0 27,-308 691,-75" stroke-width="2" stroke="rgba(71,210,232,.2)" fill="none"/>
                    </svg>
                </template>
                
            </div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'CenterCanvas',
    props: ['typeListData', 'currentTypeId', 'currentTypeName'],
    data() {
        return {
            currentTypeIcon: ''
        }
    },
    created() {},
    methods: {
        // 映射类型图标
        mapTypeIcon(name) {
            let iconClass = ''

            if(name.indexOf('无人') > -1) {
                iconClass = 'icon_wurenzhishou'
            } else if(name.indexOf('电瓶车') > -1) {
                iconClass = 'icon_weijindianpingche'
            } else if(name.indexOf('煤气罐') > -1) {
                iconClass = 'icon_weijinmeiqiguan'
            } else if(name.indexOf('通道占用') > -1) {
                iconClass = 'icon_xiaofangtongdaozhanyong'
            } else if(name.indexOf('火眼') > -1||name.indexOf('烟火') > -1) {
                iconClass = 'icon_yanhuoshibie'
            } else if(name.indexOf('口罩') > -1) {
                iconClass = 'icon_kouzhao'
            } else if(name.indexOf('安全帽') > -1) {
                iconClass = 'icon_anquanmao'
            } else if(name.indexOf('通道阻塞') > -1) {
                iconClass = 'icon_shusantongdaodusai'
            } else if(name.indexOf('车辆') > -1) {
                iconClass = 'icon_cheliang'
            } else if(name.indexOf('危险品') > -1) {
                iconClass = 'iconweixianpinfenxi-01'
            }

            return iconClass
        },
        handelClickType(i) {
            // 通知父组件切换了类别
            this.$emit('changeType', i)
        }
    },
    watch: {
        currentTypeName(val) {
            if(val) {
                this.currentTypeIcon  = this.mapTypeIcon(val)
            }
        }
    }
}
</script>
<style lang="scss">
.center-canvas-model {
    position: relative;
    width: 100%;
    height: 100%;
    .round-wrap {
        position: relative;
        margin: 0 auto;
        padding-top: 118px;
        width: 650px;
        height: 650px;
        .margin-round {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -252.5px;
            margin-left: -252.5px;
            width: 505px;
            height: 505px;
            background: url(../../../../../assets/images/detailPage/margin-round.png) center center no-repeat;
            background-size: contain;
            animation: scaning 5s linear infinite;
        }
        .padding-round {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            width: 414px;
            height: 414px;
            background: url(../../../../../assets/images/detailPage/padding-round.png) center center no-repeat;
            background-size: contain;
            .iconfont {
                font-size: 90px;
                color: #00daea;
                text-shadow:rgba(0,0,0,.2) 5px 5px 5px;
                animation: icon_breathing 4s linear infinite;
            }
        }
        .ball-one,
        .ball-two {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -252.5px;
            margin-left: -252.5px;
            border-radius: 50%;
            border: 1px solid #23acfb;
            width: 505px;
            height: 505px;
            animation: ripple_effect 2s infinite;
            box-sizing: content-box;
        }
        .ball-one {
            animation-delay: 0s;
        }
        .ball-two {
            animation-delay: 2s;
        }
    }
    .recognize-categories-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .recognize-categories-item {
            display: inline-block;
            position: absolute;
            &.type-item-1 {
                top: 137px;
                left: 78px;
            }
            &.type-item-2 {
                top: 235px;
                left: 355px;
            }
            &.type-item-3 {
                top: 290px;
                left: 1230px;
            }
            &.type-item-4 {
                top: 92px;
                left: 1435px;
            }
            &.type-item-5 {
                top: 175px;
                left: 1658px;
            }
            .message-box {
                position: relative;
                padding: 15px 20px;
                background:rgba(6,23,35,1);
                border:1px solid rgba(100,184,255,1);
                border-radius:6px;
                box-shadow: inset 0px 0px 15px 1px #64B8FF;
                z-index: 10;
                cursor: pointer;
                .item-type-icon {
                    text-align: center;
                    height: 40px;
                    line-height: 40px;
                    .iconfont {
                        font-size: 40px;
                        background-image: linear-gradient(109deg,rgba(91,194,255,1),rgba(73,133,255,1));
                        -webkit-background-clip:text;
                        color: transparent;
                    }
                }
                .item-type-name {
                    color: #52A5FF;
                    font-size: 18px;
                    line-height: 30px;
                    text-align: center;
                }
                .item-type-detail {
                    display: flex;
                    margin-top: 15px;
                    width: 100%;
                    .detail-item {
                        width: 50%;
                        text-align: center;
                        .detail-item-value {
                            font-size: 32px;
                        }
                        .detail-item-title {
                            font-size: 12px;
                            color: #A3BEDD;
                        }
                    }
                }
            }
            .projection-lamp {
                margin: 0 auto;
                width: 100px;
                height: 213px;
                background: url(../../../../../assets/images/detailPage/AICloudVideo/projection-lamp.png) center center no-repeat;
                background-size: cover;
                animation: twinkle 3s infinite;
            }
            .projection-base {
                position: relative;
                width: 100%;
                margin-top: -42px;
                .base-round {
                    margin: 0 auto;
                    width: 168px;
                    height: 56px;
                    border-radius: 50%;
                    background-color: rgba(81,128,206,0.2);
                }
                .ball-one {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -29px;
                    margin-left: -85px;
                    border-radius: 50%;
                    border: 1px solid #5180CE;
                    box-shadow: inset 0px 0px 15px 1px #5180CE;
                    width: 168px;
                    height: 56px;
                    animation: base_ripple_effect 3s infinite;
                    animation-delay: 2s;
                    box-sizing: content-box;
                }
            }
            &.active {
                .message-box  {
                    border-color: #52DBF1;
                    box-shadow: inset 0px 0px 15px 1px #52DBF1;
                    .item-type-icon {
                        animation: icon_breathing 4s linear infinite;
                        .iconfont {
                            background-image:linear-gradient(109deg,rgba(82,219,241,1),rgba(13,159,183,1));
                            color: #00daea;
                            text-shadow:rgba(0,0,0,.2) 5px 5px 5px;
                        }
                    }
                }
                .projection-lamp {
                    background: url(../../../../../assets/images/detailPage/AICloudVideo/projection-lamp-active.png) center center no-repeat;
                }
                .projection-base {
                    .base-round {
                        background-color: rgba(82,219,241,0.2);
                    }
                    .ball-one {
                        border: 1px solid #52DBF1;
                        box-shadow: inset 0px 0px 15px 1px #52DBF1;
                    }
                }
            }
            .svg-line {
                z-index: 1;
            }
            #svg_line_1 {
                position: absolute;
                top: -139px;
                left: 92px;
                width: 560px;
                height: 200px;
            }
            #svg_line_2 {
                position: absolute;
                top: -60px;
                left: 88px;
                width: 260px;
                height: 75px;
            }
            #svg_line_3 {
                position: absolute;
                top: -80px;
                left: -68px;
                width: 150px;
                height: 80px;
                transform: rotateY(180deg);
            }
            #svg_line_4 {
                position: absolute;
                top: -145px;
                left: -415px;
                width: 500px;
                height: 150px;
                transform: rotateY(180deg);
            }
            #svg_line_5 {
                position: absolute;
                top: -196px;
                left: -640px;
                width: 720px;
                height: 200px;
                transform: rotateY(180deg);
            }
        }
    }
}
</style>
